<template>
    <div class="block">
        <wioc-timeline  :reverse="reverse">
            <wioc-timeline-item
                    v-for="(item, index) in dataList"
                    :key="index"
                    :color="index===(dataList.length-1)?'#4BA0F3':'#C4C6CF'"
                    :hide-timestamp="reverse">
                <h3 class="title">
                    {{item.stepName}}
                    <span v-if="showLiaisons" >
                   <wioc-icon-svg name="icon-gongzuoshouji"></wioc-icon-svg>
                    {{item.liaisons}}
                </span>
                    <span v-if="showTags" style="display: unset">
                    <el-tag v-if="normal"type="success" >正常</el-tag>
                    <el-tag v-else type="danger" >异常</el-tag>
                </span>
                </h3>
                <div v-if="item.supervise" class="duban">
                    督办
                </div>
                <div class="StepsContent">
                    <ul>
                        <li>{{item.type}}</li>
                        <li>{{item.desc}}</li>
                        <li>{{item.position}}</li>
                        <li>{{item.status}}</li>
                        <li style="font-family: Helvetica;color: #999999;line-height: 0.13rem">
                            {{item.time|formatDate('yyyy-MM-dd hh:mm:ss')}}
                        </li>
                        <li v-if="item.pictureVideo" style="display: flex;justify-content: left">
                            <div v-for="pathItem in item.pictureVideo">
                                <img  class="img" :src="pathItem" style="width: 0.7rem;height: 0.7rem;margin-right: 0.05rem;border-radius: 0.05rem" >
                            </div>
                        </li>
                    </ul>
                </div>
            </wioc-timeline-item>
        </wioc-timeline>
    </div>
</template>

<script>
    export default {
        name: "wioc-process-information",
        props:{
            dataList:{
                type:Array,
                default:[]
            },
            showTag: {
                type:Boolean,
                default:false
            },
            showLiaison:{
                type:Boolean,
                default: true
            }
        },
        data(){
            return{
                showLiaisons:this.showLiaison,//是否显示联络人
                showTags:this.showTag, //是否显示正常异常标签
                normal:true,  //标签显示为正常
                reverse:true,//倒叙
            }
        }
    }
</script>

<style  lang="less" scoped>
        .block{
            .title{
                display: flex;
                justify-content: space-between;
                font-family: PingFangSC-Semibold;
                font-size: 0.12rem;
                color: #595959;
                text-align: left;
                line-height: 0.17rem;
                font-weight: bold;
                span{
                    font-family: PingFangSC-Regular;
                    font-size: 0.1rem;
                    //color: #666666;
                    text-align: left;
                    line-height: 0.14rem;
                    font-weight: normal !important;
                    .icon-svg{
                        width:0.16rem ;
                        height: 0.16rem;
                    }
                }
            }
            .duban{
                width: 0.5rem;
                height: 0.5rem;
                border: 0.03rem solid  #F66464;
                border-radius: 50%;
                content:'duban';
                display:block;
                line-height: 0.44rem;text-align: center;
                font-size: 0.16rem;
                position: absolute;
                margin-left: 70%;
                margin-top: -3%;
                transform: rotate(45deg);
                font-family: PingFangSC-Regular;
                color: #F66464;
                letter-spacing: -0.11px;
            }
            .StepsContent{
                padding-top: 0.06rem;
                padding-bottom: 0.16rem;
                ul> li{
                    font-family: PingFangSC-Regular;
                    font-size: 0.1rem;
                    color: #666666;
                    text-align: left;
                    line-height: 0.14rem;
                    padding-bottom: 0.01rem;
                }
            }
        }
        .el-tag--success {
            background: #DBF8F4;
            border-radius: 0.1rem;
            line-height: 0.21rem !important;
            width: 0.32rem !important;
            font-family: PingFangSC-Regular;
            font-size: 0.11rem;
            color: #63BA96;
            padding: 0.03rem 0.05rem 0.03rem 0.05rem;
            letter-spacing: -0.07px;
            text-align: center !important;
            border: unset;
        }
        .el-tag.el-tag--danger {
            background: rgba(246,100,100,0.50);
            border-radius: 0.1rem;
            line-height: 0.21rem !important;
            width: 0.32rem !important;
            font-family: PingFangSC-Regular;
            font-size: 0.11rem;
            color: #F66464;
            padding: 0.03rem 0.05rem 0.03rem 0.05rem;
            letter-spacing: -0.07px;
            text-align: center !important;
            border: unset;
        }
</style>
